<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>基础语法 | 个人笔记</title>
    <meta name="description" content="个人笔记">
    <link rel="stylesheet" href="/vite-vue-blog/assets/style.8f176e54.css">
    <link rel="modulepreload" href="/vite-vue-blog/assets/app.864f9b59.js">
    <link rel="modulepreload" href="/vite-vue-blog/assets/notes_1.javaScript_typescript_2.基础语法.md.2b48285d.lean.js">
    <link rel="prefetch" href="/vite-vue-blog/assets/chunks/VPAlgoliaSearchBox.1d33ff4e.js">
    <link rel="icon" href="/vite-vue-blog/logo.svg">
  <link rel="preload" href="/assets/inter-latin.7b37fe23.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <script>(()=>{const e=localStorage.getItem("vue-theme-appearance");(!e||e==="auto"?window.matchMedia("(prefers-color-scheme: dark)").matches:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="VPApp" data-v-73d720b3><!--[--><span tabindex="-1" data-v-9a0c1eda></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-9a0c1eda> Skip to content </a><!--]--><!----><!--[--><!--]--><header class="VPNav nav-bar" data-v-73d720b3 data-v-665b4326><div class="VPNavBar" data-v-665b4326 data-v-22c1e5cc><div class="container" data-v-22c1e5cc><a class="VPNavBarTitle" href="/vite-vue-blog/" data-v-22c1e5cc data-v-734a10ac><h1 class="text" data-v-734a10ac>个人笔记</h1></a><div class="content" data-v-22c1e5cc><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-22c1e5cc data-v-03d04f32><span id="main-nav-aria-label" class="visually-hidden" data-v-03d04f32>Main Navigation</span><!--[--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">javaScript <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/1.javaScript/typescript/1.%E4%BB%8B%E7%BB%8D%E4%B8%8E%E5%AE%89%E8%A3%85.html"><!--[-->typescript<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/1.%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95.html"><!--[-->基础<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/1.javaScript/%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0/10.%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0.html"><!--[-->工具函数<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">basic <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/1.html/1.%E5%9F%BA%E7%A1%80.html"><!--[-->html<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/2.css/1.%E5%9F%BA%E7%A1%80.html"><!--[-->css<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/5.node/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->node<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/6.http/2.http.html"><!--[-->http<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/7.git/github.html"><!--[-->git<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/8.java/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->java<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/2.basic/9.%E7%AE%97%E6%B3%95/1.%E5%9F%BA%E7%A1%80.html"><!--[-->算法<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">framework <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/10.react/1.%E9%A1%B9%E7%9B%AE%E5%88%9B%E5%BB%BA%E4%B8%8E%E9%85%8D%E7%BD%AE.html"><!--[-->react<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/3.express/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->express<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/3.vue/12.vitepress.html"><!--[-->vue<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/4.uniapp/1.%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE.html"><!--[-->uniapp<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/5.electron/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->electron<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/6.%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE.html"><!--[-->微信小程序<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/7.%E4%B9%BE%E5%9D%A4/1.%E5%89%8D%E7%BD%AE%E7%9F%A5%E8%AF%86.html"><!--[-->乾坤<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/3.framework/koa/redis.html"><!--[-->koa<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">library <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/Autoprefixer/1.%E5%9F%BA%E7%A1%80.html"><!--[-->Autoprefixer<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/eharts/1.vue%E4%B8%AD%E4%BD%BF%E7%94%A8.html"><!--[-->eharts<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/logic-flow/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->logic-flow<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/Monaco-Editor/Monaco-Editor.html"><!--[-->Monaco-Editor<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/node%E5%8C%85/cheerio.html"><!--[-->node包<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/xlsx/1.%E6%96%87%E6%A1%A3%E7%BF%BB%E8%AF%91.html"><!--[-->xlsx<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/4.library/%E5%BE%85%E6%95%B4%E7%90%86/axios.html"><!--[-->待整理<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">build <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/5.build/1.webpack/1.%E8%B5%B7%E6%AD%A5.html"><!--[-->webpack<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/5.build/2.rollup/1.%E4%BB%8B%E7%BB%8D.html"><!--[-->rollup<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/5.build/3.babel/3.babel.html"><!--[-->babel<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/5.build/4.server/4.%E4%B8%8A%E7%BA%BF.html"><!--[-->server<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-03d04f32 data-v-6671b864><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">all <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/6.all/3.just-start/2.mongodb.html"><!--[-->just-start<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/6.all/4.solve-problems/postmon.html"><!--[-->solve-problems<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/6.all/4.vscode/1.vscode%E4%BD%BF%E7%94%A8.html"><!--[-->vscode<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/6.all/English/%E5%AD%A6%E4%B9%A0%E5%AD%A6%E4%B9%A0.html"><!--[-->English<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vite-vue-blog/notes/6.all/Snabbdom/1.%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB.html"><!--[-->Snabbdom<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><div class="VPNavBarAppearance appearance" data-v-22c1e5cc data-v-4a42e18e><button class="vt-switch vt-switch-appearance" type="button" role="switch" aria-label="toggle dark mode" data-v-4a42e18e><span class="vt-switch-check"><span class="vt-switch-icon"><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-sun"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-moon"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="vt-social-links VPNavBarSocialLinks social-links" data-v-22c1e5cc data-v-16262ec2><!--[--><a class="vt-social-link is-small" href="https://github.com/zqy233/vite-vue-blog" title="github" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden">github</span></a><!--]--></div><div class="vt-flyout VPNavBarExtra extra" data-v-22c1e5cc data-v-0e7e8326><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-icon"><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="vt-flyout-menu"><div class="vt-menu"><!----><!--[--><!--[--><div class="vt-menu-group" data-v-0e7e8326><div class="vt-menu-item item" data-v-0e7e8326><p class="vt-menu-label" data-v-0e7e8326>明暗</p><div class="vt-menu-action action" data-v-0e7e8326><button class="vt-switch vt-switch-appearance" type="button" role="switch" aria-label="toggle dark mode" data-v-0e7e8326><span class="vt-switch-check"><span class="vt-switch-icon"><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-sun"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-moon"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="vt-menu-group" data-v-0e7e8326><div class="vt-menu-item item" data-v-0e7e8326><div class="vt-social-links social-links" data-v-0e7e8326><!--[--><a class="vt-social-link is-small" href="https://github.com/zqy233/vite-vue-blog" title="github" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden">github</span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><button type="button" class="vt-hamburger VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-22c1e5cc data-v-60965b98><span class="vt-hamburger-container"><span class="vt-hamburger-top"></span><span class="vt-hamburger-middle"></span><span class="vt-hamburger-bottom"></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-73d720b3 data-v-acbefcb0><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-acbefcb0><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-acbefcb0><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-acbefcb0>目录</span></button><a class="top-link" href="#" data-v-acbefcb0>回到顶部</a></div><aside class="VPSidebar" data-v-73d720b3 data-v-137f95ea><nav id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-137f95ea><!--[--><!--]--><span id="sidebar-aria-label" class="visually-hidden" data-v-137f95ea>Sidebar Navigation </span><!--[--><div class="group" data-v-137f95ea><section class="VPSidebarGroup" data-v-137f95ea data-v-0ce3abb6><div class="title" data-v-0ce3abb6><h2 class="active title-text" data-v-0ce3abb6>typescript</h2></div><!--[--><a class="link" href="/vite-vue-blog/notes/1.javaScript/typescript/1.%E4%BB%8B%E7%BB%8D%E4%B8%8E%E5%AE%89%E8%A3%85.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>介绍与安装</p></a><a class="link active" href="/vite-vue-blog/notes/1.javaScript/typescript/2.%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>基础语法</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/typescript/3.%E8%BF%9B%E9%98%B6%E8%AF%AD%E6%B3%95.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>进阶语法</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/typescript/4.%E7%BB%BC%E5%90%88%E7%A4%BA%E4%BE%8B.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>综合示例</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/typescript/6.type-challenges.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>type-challenges</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/typescript/7.doc%E6%B3%A8%E9%87%8A%E6%B3%95.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>doc注释法</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/typescript/8.tsconfig.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>tsconfig</p></a><!--]--></section></div><div class="group" data-v-137f95ea><section class="VPSidebarGroup" data-v-137f95ea data-v-0ce3abb6><div class="title" data-v-0ce3abb6><h2 class="title-text" data-v-0ce3abb6>基础</h2></div><!--[--><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/1.%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>基础语法</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/2.String.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>String</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/3.Number.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>Number</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/4.Object.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>Object</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/5.Array.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>Array</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/6.canvas.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>canvas</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/10.call-apply-bind.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>call-apply-bind</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/12.Date.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>Date</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/14.%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>正则表达式</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/15.Promise.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>Promise</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/20.ajax.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>ajax</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/ES6.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>ES6</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/setTimeout.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>setTimeout</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>事件委托</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>事件循环</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>原型与原型链</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E5%8E%9F%E5%9E%8B%E9%93%BE%E6%8E%A2%E7%A9%B6.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>原型链探究</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E5%88%86%E7%89%87.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>大文件上传分片</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E6%87%92%E5%8A%A0%E8%BD%BD%E5%92%8C%E8%99%9A%E6%8B%9F%E6%BB%9A%E5%8A%A8.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>懒加载和虚拟滚动</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E6%96%87%E4%BB%B6%E4%BA%8C%E8%BF%9B%E5%88%B6.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>文件二进制</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E6%B7%B1%E6%B5%85%E6%8B%B7%E8%B4%9D.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>深浅拷贝</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E9%97%AD%E5%8C%85.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>闭包</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%9F%BA%E7%A1%80/%E9%98%B2%E6%8A%96%E4%B8%8E%E8%8A%82%E6%B5%81.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>防抖与节流</p></a><!--]--></section></div><div class="group" data-v-137f95ea><section class="VPSidebarGroup" data-v-137f95ea data-v-0ce3abb6><div class="title" data-v-0ce3abb6><h2 class="title-text" data-v-0ce3abb6>工具函数</h2></div><!--[--><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0/10.%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>工具函数</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0/16.%E6%BB%9A%E5%8A%A8.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>滚动</p></a><a class="link" href="/vite-vue-blog/notes/1.javaScript/%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0/svg.html" data-v-0ce3abb6 data-v-539850a2><p class="link-text" data-v-539850a2>svg</p></a><!--]--></section></div><!--]--><!--[--><!--]--></nav></aside><div id="VPContent" class="VPContent has-sidebar" data-v-73d720b3 data-v-f1570ab6><div class="VPContentDoc has-aside has-sidebar" data-v-f1570ab6 data-v-6971fa12><div class="container" data-v-6971fa12><div class="aside" data-v-6971fa12><div class="aside-container" data-v-6971fa12><!--[--><!--]--><div class="VPContentDocOutline" data-v-6971fa12 data-v-6706ac52><div class="outline-marker" data-v-6706ac52></div><div class="outline-title" data-v-6706ac52>索引</div><nav aria-labelledby="doc-outline-aria-label" data-v-6706ac52><span id="doc-outline-aria-label" class="visually-hidden" data-v-6706ac52>Table of Contents for current page</span><ul class="root" data-v-6706ac52><!--[--><li style="" data-v-6706ac52><a class="outline-link" href="#类型注解" data-v-6706ac52>类型注解</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#基础类型" data-v-6706ac52>基础类型</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#接口" data-v-6706ac52>接口</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#函数类型" data-v-6706ac52>函数类型</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#数组类型" data-v-6706ac52>数组类型</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#类型推断" data-v-6706ac52>类型推断</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#联合类型" data-v-6706ac52>联合类型</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#交叉类型" data-v-6706ac52>交叉类型</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#类型断言" data-v-6706ac52>类型断言</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#类型别名" data-v-6706ac52>类型别名</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#类型别名和接口的区别" data-v-6706ac52>类型别名和接口的区别</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#字面量类型" data-v-6706ac52>字面量类型</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#枚举" data-v-6706ac52>枚举</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#类" data-v-6706ac52>类</a><!----></li><li style="" data-v-6706ac52><a class="outline-link" href="#泛型" data-v-6706ac52>泛型</a><!----></li><!--]--></ul></nav></div><!--[--><!--]--><!----><!--[--><!--]--></div></div><div class="content" data-v-6971fa12><!--[--><!--]--><main data-v-6971fa12><div style="position:relative;" class="vt-doc notes" data-v-6971fa12><div><h1 id="基础语法" tabindex="-1">基础语法 <a class="header-anchor" href="#基础语法" aria-hidden="true">#</a></h1><h2 id="类型注解" tabindex="-1">类型注解 <a class="header-anchor" href="#类型注解" aria-hidden="true">#</a></h2><p>这是<code>TypeScript</code>最基础的语法，为变量指明类型，称为<strong>类型注解</strong>，语法为：<code>变量:类型</code></p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> isDone</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span></span>
<span class="line"></span></code></pre></div><h2 id="基础类型" tabindex="-1">基础类型 <a class="header-anchor" href="#基础类型" aria-hidden="true">#</a></h2><h3 id="原始数据类型" tabindex="-1">原始数据类型 <a class="header-anchor" href="#原始数据类型" aria-hidden="true">#</a></h3><p><code>JavaScript</code>分为原始数据类型和对象类型，原始数据类型有：<code>number</code>、<code>string</code>、<code>boolean</code>、<code>null</code>、<code>undefined</code></p><p>在<code>TypeScript</code>中，相应类型注解为：</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tsNum</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">123</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tsStr</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">abc</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tsFlag</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tsNull</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">null</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">null</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tsUndefined</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">undefined</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">undefined</span></span>
<span class="line"></span></code></pre></div><h3 id="null与undefined" tabindex="-1">null与undefined <a class="header-anchor" href="#null与undefined" aria-hidden="true">#</a></h3><p>在<code>TypeScript</code>中，<code>null</code>和<code>undefined</code>是所有类型的子类型，也就是说可以把<code>undefined</code>或<code>null</code>赋值给原始数据类型的变量</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tsNumber1</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">undefined</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tsNumber2</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">null</span></span>
<span class="line"></span></code></pre></div><h3 id="void" tabindex="-1">void <a class="header-anchor" href="#void" aria-hidden="true">#</a></h3><p><code>JavaScript</code>中，是没有空值(<code>void</code>)的概念的，但在<code>TypeScript</code>中，可以使用<code>void</code>来表示一个没有返回值的函数</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">sayHello</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">():</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Hello, world</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>也可以定义一个<code>void</code>类型的变量，不过这样的变量并没有什么意义，因为只能给这种变量赋值为<code>null</code>或<code>undefined</code></p><p>这也是<code>void</code>跟<code>null</code>和<code>undefined</code>的区别，对于<code>void</code>而言，它只能被赋值为<code>null</code>或者<code>undefined</code></p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> voidValue1</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">null</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> voidValue2</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">undefined</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 报错</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> voidValue1</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">123</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> voidValue2</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">abc</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span></code></pre></div><h3 id="any" tabindex="-1">any <a class="header-anchor" href="#any" aria-hidden="true">#</a></h3><p>任意值<code>any</code>用来表示可以接受任何类型的值</p><p>以下代码会报错,因为变量被定义为<code>number</code>，那么它只能接受<code>number</code>类型的值，改变其类型，会编译报错</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tsNumber</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">123</span></span>
<span class="line"><span style="color:#A6ACCD;">tsNumber </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">123</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span></code></pre></div><p>但是如果一个变量被定义为<code>any</code>，那么代表它可以接受任何类型的值：</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#676E95;font-style:italic;">// 类型正确</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tsAny</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">123</span></span>
<span class="line"><span style="color:#A6ACCD;">tsAny </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">123</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span></code></pre></div><p>如果定义了一个变量，没有指定其类型，也没有初始值，那么它默认为<code>any</code>类型</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#676E95;font-style:italic;">// 类型正确，不会报错，因为默认为any类型</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tsValue</span></span>
<span class="line"><span style="color:#A6ACCD;">tsValue </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">123</span></span>
<span class="line"><span style="color:#A6ACCD;">tsValue </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">123</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span></code></pre></div><h2 id="接口" tabindex="-1">接口 <a class="header-anchor" href="#接口" aria-hidden="true">#</a></h2><p>接口<code>interface</code>用于为对象提供类型注解, 接口<code>interface</code>中的任何代码都不会被最后编译到<code>JavaScript</code>中</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Person</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> person</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Person</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">why</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">23</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>在上方代码中，<code>person</code>对象的类型是接口<code>Person</code>，那么<code>person</code>对象的所有属性只能是<code>Person</code>规定的属性，且属性值的类型也必须和<code>Person</code>中规定的一致，多一个属性或者少一个属性都会报错</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Person</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 报错</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> person1</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Person</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">why</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 报错</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> person2</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Person</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">why</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">23</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">sex</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">man</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="接口中的任意属性" tabindex="-1">接口中的任意属性 <a class="header-anchor" href="#接口中的任意属性" aria-hidden="true">#</a></h3><p>以上一个例子为基础，假设接口只对<code>name</code>和<code>age</code>做规定，其它任何属性名与属性类型都是可以的，那么可以如下方式进行定义：</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Person</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// 任意属性名与属性类型</span></span>
<span class="line"><span style="color:#A6ACCD;">  [propName</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">any</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 类型正确</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> person</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Person</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">why</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">23</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">sex</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">man</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="接口中的可选属性" tabindex="-1">接口中的可选属性 <a class="header-anchor" href="#接口中的可选属性" aria-hidden="true">#</a></h3><p>?:可选属性，代表该属性可存在可不存在，但存在的话类型必须无误</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Person</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// age属性是可选的</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 类型正确</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> person1</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Person</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">why</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 报错</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> person2</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Person</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">why</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">123</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="接口中的只读属性" tabindex="-1">接口中的只读属性 <a class="header-anchor" href="#接口中的只读属性" aria-hidden="true">#</a></h3><p>readonly表示属性只读，不可修改，在接口中标记了属性为只读的， 那么其不能被赋值。</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Person</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#C792EA;">readonly</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> person</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Person</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">why</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">23</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 报错</span></span>
<span class="line"><span style="color:#A6ACCD;">person</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">age </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">32</span></span>
<span class="line"></span></code></pre></div><h2 id="函数类型" tabindex="-1">函数类型 <a class="header-anchor" href="#函数类型" aria-hidden="true">#</a></h2><p>为参数和返回值设置类型，不定义相应类型的话，默认为<code>any</code></p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#676E95;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">param</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#A6ACCD;font-style:italic;">x</span><span style="color:#676E95;font-style:italic;"> 数字1</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">param</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#A6ACCD;font-style:italic;">y</span><span style="color:#676E95;font-style:italic;"> 数字2</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">returns</span><span style="color:#676E95;font-style:italic;"> 数字1和数字2之和</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">x</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> y</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">x</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">y</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">))    </span><span style="color:#676E95;font-style:italic;">// 输出3</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))  </span><span style="color:#676E95;font-style:italic;">// 报错</span></span>
<span class="line"></span></code></pre></div><p>也可以使用interface为函数设置类型</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">AddInterface</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">x</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> y</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">param</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#A6ACCD;font-style:italic;">x</span><span style="color:#676E95;font-style:italic;"> 数字1</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">param</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#A6ACCD;font-style:italic;">y</span><span style="color:#676E95;font-style:italic;"> 数字2</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">returns</span><span style="color:#676E95;font-style:italic;"> 数字1和数字2之和</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> add</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">AddInterface</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">x</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> y</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">x</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">y</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">)) </span><span style="color:#676E95;font-style:italic;">// 输出3</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))  </span><span style="color:#676E95;font-style:italic;">// 报错</span></span>
<span class="line"></span></code></pre></div><h3 id="可选参数" tabindex="-1">可选参数 <a class="header-anchor" href="#可选参数" aria-hidden="true">#</a></h3><p>函数接受可选的参数，使用?:</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getArea</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">a</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">b</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">?</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">*</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">b</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">*</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">a</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">getArea</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">4</span><span style="color:#A6ACCD;">))     </span><span style="color:#676E95;font-style:italic;">// 16</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">getArea</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">4</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">))  </span><span style="color:#676E95;font-style:italic;">// 20</span></span>
<span class="line"></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>可选参数必须放在最后一个位置，否则会报错</p></div><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#676E95;font-style:italic;">// 报错</span></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getArea</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">b</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> a</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">b</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">?</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">*</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">b</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">*</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">a</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="参数默认值" tabindex="-1">参数默认值 <a class="header-anchor" href="#参数默认值" aria-hidden="true">#</a></h3><p>在<code>JavaScript</code>中，函数允许给参数设置默认值，因此另外一种处理可选参数的方式是，为参数提供一个默认值，此时<code>TypeScript</code>将会把该参数识别为可选参数：</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getArea</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">a</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">*</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">b</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">getArea</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">4</span><span style="color:#A6ACCD;">))     </span><span style="color:#676E95;font-style:italic;">// 4</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">getArea</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">4</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">))  </span><span style="color:#676E95;font-style:italic;">// 20</span></span>
<span class="line"></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>给一个参数设置了默认值后，就不再受<code>TypeScript</code>可选参数必须在最后一个位置的限制了</p></div><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getArea</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">b</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> a</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">*</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">b</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 传递一个undefined占位,undefined不影响参数1的默认值，仅作占位用</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">getArea</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">undefined,</span><span style="color:#F78C6C;">4</span><span style="color:#A6ACCD;">)) </span><span style="color:#676E95;font-style:italic;">// 4</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">getArea</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">4</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">))        </span><span style="color:#676E95;font-style:italic;">// 20</span></span>
<span class="line"></span></code></pre></div><h3 id="剩余参数" tabindex="-1">剩余参数 <a class="header-anchor" href="#剩余参数" aria-hidden="true">#</a></h3><p>在<code>ES6</code>中，可以使用<code>...</code>符号进行传递剩余参数，在<code>TypeScript</code>中，依然可以这么做</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#676E95;font-style:italic;">// rest是一个数组，可以使用数组的类型来定义它</span></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getTotal</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">a</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">rest</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;">[]</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;">)    </span><span style="color:#676E95;font-style:italic;">// 1</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">rest</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// [2, 3, 4]</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#82AAFF;">getTotal</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">4</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre></div><h3 id="函数重载" tabindex="-1">函数重载 <a class="header-anchor" href="#函数重载" aria-hidden="true">#</a></h3><p>因为在<code>JavaScript</code>中，并没有限制函数参数的个数或者类型，因此<code>JavaScript</code>没有<code>函数重载</code>的概念</p><p>在<code>TypeScript</code>中对于函数重载的理解是：只要函数参数的类型或者函数参数的数量不同时，就可以认为这是两个函数(<code>重载</code>)</p><p>下方示例，前三个都是<code>重载</code>，最后一个才是<code>实现</code>，因为<code>实现</code>只包含了前两个<code>重载</code>，所以第三个<code>重载</code>会报错</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">add</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">a</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">add</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">a</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 报错，此重载签名与其实现签名不兼容</span></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">add</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">a</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">add</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">a</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">typeof</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">number</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">typeof</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">b</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">number</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">b</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;&quot;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">b</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">)) </span><span style="color:#676E95;font-style:italic;">// 3</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)) </span><span style="color:#676E95;font-style:italic;">// 12</span></span>
<span class="line"></span></code></pre></div><blockquote><p>在有函数重载时，会优先从第一个进行逐一匹配，因此如果重载函数有包含关系，应该将最精准的函数定义写在最前面</p></blockquote><h2 id="数组类型" tabindex="-1">数组类型 <a class="header-anchor" href="#数组类型" aria-hidden="true">#</a></h2><h3 id="两种方法定义数组类型" tabindex="-1">两种方法定义数组类型 <a class="header-anchor" href="#两种方法定义数组类型" aria-hidden="true">#</a></h3><p>方法一 数组泛型，Array&lt;type&gt;</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> list</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Array</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"></span></code></pre></div><p>方法二 type[ ]</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> list</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;">[] </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"></span></code></pre></div><h3 id="联合类型数组" tabindex="-1">联合类型数组 <a class="header-anchor" href="#联合类型数组" aria-hidden="true">#</a></h3><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tsArray</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> (</span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#A6ACCD;">) [] </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"></span></code></pre></div><h3 id="对象类型数组" tabindex="-1">对象类型数组 <a class="header-anchor" href="#对象类型数组" aria-hidden="true">#</a></h3><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> objArray</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">[] </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">AAA</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">23</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> objArray1</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Array</span><span style="color:#89DDFF;">&lt;{</span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">}&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">AAA</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">23</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">obj</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> objArray2</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">obj</span><span style="color:#A6ACCD;">[] </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">AAA</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">23</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> objArray3</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Array</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">obj</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">AAA</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">23</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"></span></code></pre></div><h3 id="元组" tabindex="-1">元组 <a class="header-anchor" href="#元组" aria-hidden="true">#</a></h3><p>一个数组的长度是确定的，且每个位置的值的类型也是确定的，那么就可以把这样的数组称为元组</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> nameNumber</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;">] </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"></span></code></pre></div><p>当访问元组中已知位置的索引时，将得到其对应正确的值；当访问元组中未知位置的索引时，会报错</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tuple</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;">] </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">AAA</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">123</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(tuple[</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">]) </span><span style="color:#676E95;font-style:italic;">// 123</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(tuple[</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">]) </span><span style="color:#676E95;font-style:italic;">// 报错</span></span>
<span class="line"></span></code></pre></div><h2 id="类型推断" tabindex="-1">类型推断 <a class="header-anchor" href="#类型推断" aria-hidden="true">#</a></h2><p>在以上的所有实例中，为每一个变量提供了相应的类型，也就是<strong>类型注解</strong>。而有些时候，没有为其提供一个确定的类型，但提供了一个确定的值，那么<code>TypeScript</code>会根据给定的值的类型自动推断出这个变量的类型，称为<strong>类型推断</strong></p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tsNum </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">123</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 类型推断为number</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tsStr </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">abc</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 类型推断为string</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tsFlag </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 类型推断为boolean</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tsNull </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">null</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 类型推断为any</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tsUndefined </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">undefined</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 类型推断为any</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> helloWorld </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">hello</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">123</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">world</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">abc</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 类型推断helloWorld的类型为</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// const helloWorld = {</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// hello: number,</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// world: string</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// }</span></span>
<span class="line"></span></code></pre></div><p>由上方例子可见，null和undefined不能推断</p><p>另外，函数的参数无法推断，必须指定，但返回值可以推断，但建议写上，更加清晰</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">num1</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> num2</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">num1</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">num2</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 可以省略函数的返回值类型，因为typescript会基于num1和num1全部为number类型，从而推断出函数返回值为number类型</span></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">num1</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> num2</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">num1</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">num2</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h2 id="联合类型" tabindex="-1">联合类型 <a class="header-anchor" href="#联合类型" aria-hidden="true">#</a></h2><p>表示取值可以为多种类型中的一种，多种类型使用<code>|</code>分隔开</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> value</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span></span>
<span class="line"><span style="color:#A6ACCD;">value </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">123</span></span>
<span class="line"><span style="color:#A6ACCD;">value </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">123</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span></code></pre></div><p>当使用联合类型的时候，因为<code>TypeScript</code>不确定到底是哪一个类型，所以<code>TypeScript</code>只允许此联合类型中所有类型<code>公用的属性和方法</code></p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#676E95;font-style:italic;">// length是string类型独有的属性，不是公用的属性，所以会报错</span></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getLength</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// toString是string类型和number类型公用的方法，不会报错</span></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">valueToStr</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toString</span><span style="color:#F07178;">()</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><blockquote><p>当联合类型被赋值后，<code>TypeScript</code>会根据类型推断来确定变量的类型，一旦确定后，则此变量只能使用这种类型的属性和方法</p></blockquote><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> tsValue</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span></span>
<span class="line"><span style="color:#A6ACCD;">tsValue </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">123</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(tsValue</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length) </span><span style="color:#676E95;font-style:italic;">// 类型正确</span></span>
<span class="line"><span style="color:#A6ACCD;">tsValue </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">123</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(tsValue</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length) </span><span style="color:#676E95;font-style:italic;">// 报错</span></span>
<span class="line"></span></code></pre></div><h2 id="交叉类型" tabindex="-1">交叉类型 <a class="header-anchor" href="#交叉类型" aria-hidden="true">#</a></h2><p>一般适用于对象或者函数的&quot;合并&quot;，使用<code>&amp;</code>符号进行连接</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">type</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">result</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">T</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&amp;</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">U</span></span>
<span class="line"></span></code></pre></div><p><code>T &amp; U</code>表示一个新的类型，其中这个类型包含<code>T</code>和<code>U</code>中所有的键，这和<code>JavaScript</code>中的<code>Object.assign()</code>函数的作用非常类似</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">merge</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">T</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">U</span><span style="color:#89DDFF;">&gt;(</span><span style="color:#A6ACCD;">to</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">T</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> from</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">U</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">T</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&amp;</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">U</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#F07178;"> (</span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">in</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">from</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">;</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">to</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">T</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">U</span><span style="color:#F07178;">)[</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">from</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">key</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">any</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">to</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">T</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">U</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> obj1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">str</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">abc</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> obj2 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">num</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">123</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> result </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">merge</span><span style="color:#A6ACCD;">(obj1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> obj2)</span></span>
<span class="line"></span></code></pre></div><h2 id="类型断言" tabindex="-1">类型断言 <a class="header-anchor" href="#类型断言" aria-hidden="true">#</a></h2><p>有些情况下typescript没办法自动推断出正确的类型, 就需要手动告诉typescript这个类型</p><p>断言有2种语法, 一种是通过<code>&lt;&gt;</code>, 一种通过<code>as</code></p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#676E95;font-style:italic;">// ts推断类型为number|number[],实际上是number[]类型</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> obj </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0.5</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0.2</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">?</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">] </span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 报错,类型“number | number[]”上不存在属性“push”。类型“number”上不存在属性“push”</span></span>
<span class="line"><span style="color:#A6ACCD;">obj</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 告诉ts, obj为数字数组类型</span></span>
<span class="line"><span style="color:#A6ACCD;">(obj </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;">[])</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">) </span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 告诉ts, obj为数字数组类型</span></span>
<span class="line"><span style="color:#A6ACCD;">(&lt;</span><span style="color:#FFCB6B;">number</span><span style="color:#A6ACCD;">[]&gt;obj)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">) </span></span>
<span class="line"></span></code></pre></div><h2 id="类型别名" tabindex="-1">类型别名 <a class="header-anchor" href="#类型别名" aria-hidden="true">#</a></h2><p><code>type</code>关键字来给一个类型起一个新的名字，类型别名常用于联合类型</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">type</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Add</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">x</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> y</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> add</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Add</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">a</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> b</span></span>
<span class="line"><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// 类型正确</span></span>
<span class="line"><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// 报错，类型“string”的参数不能赋给类型“number”的参数。ts(2345)</span></span>
<span class="line"></span></code></pre></div><p>与其他类型组合</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">A</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">a</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">type</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">B</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">A</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">b</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">type</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">C</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">A</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&amp;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">b</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> aa</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">B</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">a</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> bb</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">B</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">b</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> cc</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">C</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">a</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">b</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 与泛型组合</span></span>
<span class="line"><span style="color:#C792EA;">type</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">D</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">T</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">A</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">T</span><span style="color:#A6ACCD;">[]</span></span>
<span class="line"></span></code></pre></div><h2 id="类型别名和接口的区别" tabindex="-1">类型别名和接口的区别 <a class="header-anchor" href="#类型别名和接口的区别" aria-hidden="true">#</a></h2><p>type和interface都可以定义对象类型</p><p>区别在于：</p><ul><li>type可以定义interface不能定义的类型，如联合类型，字面量类型</li><li>type还可以与其他类型组合</li><li>interface可以继承、声明合并</li></ul><h2 id="字面量类型" tabindex="-1">字面量类型 <a class="header-anchor" href="#字面量类型" aria-hidden="true">#</a></h2><p>字面量类型用来表示一个变量只能取某几个字符串值中的一个</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">type</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">eventName</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">scroll</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">mousemove</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">handleEvent</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">eventName</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#82AAFF;">handleEvent</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)    </span></span>
<span class="line"><span style="color:#82AAFF;">handleEvent</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">scroll</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)  </span></span>
<span class="line"><span style="color:#82AAFF;">handleEvent</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">dbclick</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)  </span><span style="color:#676E95;font-style:italic;">// 报错</span></span>
<span class="line"></span></code></pre></div><h2 id="枚举" tabindex="-1">枚举 <a class="header-anchor" href="#枚举" aria-hidden="true">#</a></h2><p>枚举<code>Enum</code>类型用来表示取值限定在指定的范围，例如一周只能有七天，颜色只能有红、绿、蓝等</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">enum</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">colors</span><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  red</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  green</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  blue</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(colors</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">red)   </span><span style="color:#676E95;font-style:italic;">// 0</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(colors</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">green) </span><span style="color:#676E95;font-style:italic;">// 1</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(colors</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">blue)  </span><span style="color:#676E95;font-style:italic;">// 2</span></span>
<span class="line"></span></code></pre></div><p>定义一个<code>colors</code>的枚举类型，其取值只能是<code>red</code>、<code>green</code>、<code>blue</code>。从打印的内容中发现，其输出值从0开始，依次累加1。这是枚举类型的默认行为，可以手动设置一个起始值</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">enum</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">colors</span><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  red </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  green</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  blue</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(colors</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">red)   </span><span style="color:#676E95;font-style:italic;">// 10</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(colors</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">green) </span><span style="color:#676E95;font-style:italic;">// 11</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(colors</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">blue)  </span><span style="color:#676E95;font-style:italic;">// 12</span></span>
<span class="line"></span></code></pre></div><p>在枚举类型中，不仅可以正向的获取值，还可以通过值反向获取枚举</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">enum</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">colors</span><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  red </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  green</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  blue</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(colors[</span><span style="color:#F78C6C;">10</span><span style="color:#A6ACCD;">]) </span><span style="color:#676E95;font-style:italic;">// red</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(colors[</span><span style="color:#F78C6C;">11</span><span style="color:#A6ACCD;">]) </span><span style="color:#676E95;font-style:italic;">// green</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(colors[</span><span style="color:#F78C6C;">12</span><span style="color:#A6ACCD;">]) </span><span style="color:#676E95;font-style:italic;">// blue</span></span>
<span class="line"></span></code></pre></div><h2 id="类" tabindex="-1">类 <a class="header-anchor" href="#类" aria-hidden="true">#</a></h2><h2 id="泛型" tabindex="-1">泛型 <a class="header-anchor" href="#泛型" aria-hidden="true">#</a></h2><p>根据传入的参数自动判断类型</p><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">a</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">T</span><span style="color:#89DDFF;">&gt;(</span><span style="color:#A6ACCD;">arr</span><span style="color:#89DDFF;">:</span><span style="color:#FFCB6B;">T</span><span style="color:#A6ACCD;">[]</span><span style="color:#89DDFF;">):</span><span style="color:#FFCB6B;">T</span><span style="color:#A6ACCD;">[] </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">arr</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> b </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">a</span><span style="color:#A6ACCD;">([</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">])</span></span>
<span class="line"><span style="color:#A6ACCD;">b </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">] </span><span style="color:#676E95;font-style:italic;">// 类型正确</span></span>
<span class="line"><span style="color:#A6ACCD;">b </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">] </span><span style="color:#676E95;font-style:italic;">// 报错，不能将类型“string”分配给类型“number”</span></span>
<span class="line"></span></code></pre></div></div></div><!----></main><!--[--><!--]--><footer class="VPContentDocFooter" data-v-6971fa12 data-v-716919ab><a class="prev-link" href="/vite-vue-blog/notes/1.javaScript/typescript/1.%E4%BB%8B%E7%BB%8D%E4%B8%8E%E5%AE%89%E8%A3%85.html" data-v-716919ab><span class="desc" data-v-716919ab><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-link-icon" data-v-716919ab><path d="M15,19c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4l6-6c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L10.4,12l5.3,5.3c0.4,0.4,0.4,1,0,1.4C15.5,18.9,15.3,19,15,19z"></path></svg> 上一节</span><span class="title" data-v-716919ab>介绍与安装</span></a><a class="next-link" href="/vite-vue-blog/notes/1.javaScript/typescript/3.%E8%BF%9B%E9%98%B6%E8%AF%AD%E6%B3%95.html" data-v-716919ab><span class="desc" data-v-716919ab>下一节 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-link-icon" data-v-716919ab><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></span><span class="title" data-v-716919ab>进阶语法</span></a></footer></div></div></div></div><div class="visually-hidden" aria-live="polite" data-v-73d720b3>基础语法 has loaded</div></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"a7119076\",\"notes_1.javascript_typescript_1.介绍与安装.md\":\"bd6528cc\",\"notes_1.javascript_typescript_2.基础语法.md\":\"2b48285d\",\"notes_1.javascript_typescript_3.进阶语法.md\":\"9fc200ea\",\"notes_1.javascript_typescript_4.综合示例.md\":\"b2cca1bb\",\"notes_1.javascript_typescript_6.type-challenges.md\":\"ad1ea441\",\"notes_1.javascript_typescript_7.doc注释法.md\":\"6da3a8f5\",\"notes_1.javascript_typescript_8.tsconfig.md\":\"3a9cad49\",\"notes_1.javascript_基础_1.基础语法.md\":\"53042640\",\"notes_1.javascript_基础_10.call-apply-bind.md\":\"8b5b4d53\",\"notes_1.javascript_基础_12.date.md\":\"8bbc9e82\",\"notes_1.javascript_基础_14.正则表达式.md\":\"dad2455a\",\"notes_1.javascript_基础_15.promise.md\":\"523683bd\",\"notes_1.javascript_基础_2.string.md\":\"9ef7d4a4\",\"notes_1.javascript_基础_20.ajax.md\":\"3c505745\",\"notes_1.javascript_基础_3.number.md\":\"673ae25b\",\"notes_1.javascript_基础_4.object.md\":\"c3c2d806\",\"notes_1.javascript_基础_5.array.md\":\"8341e3ea\",\"notes_1.javascript_基础_6.canvas.md\":\"5b3d57a6\",\"notes_1.javascript_基础_es6.md\":\"a11b1af7\",\"notes_1.javascript_基础_settimeout.md\":\"3a278b83\",\"notes_1.javascript_基础_事件委托.md\":\"fa7b0a71\",\"notes_1.javascript_基础_事件循环.md\":\"043fd67b\",\"notes_1.javascript_基础_原型与原型链.md\":\"85f423d2\",\"notes_1.javascript_基础_原型链探究.md\":\"7ab3569c\",\"notes_1.javascript_基础_大文件上传分片.md\":\"e732af31\",\"notes_1.javascript_基础_懒加载和虚拟滚动.md\":\"6ff4061a\",\"notes_1.javascript_基础_文件二进制.md\":\"0b60ff5e\",\"notes_1.javascript_基础_深浅拷贝.md\":\"1d99a497\",\"notes_1.javascript_基础_闭包.md\":\"4d9e0010\",\"notes_1.javascript_基础_防抖与节流.md\":\"ac94b2d6\",\"notes_1.javascript_工具函数_10.工具函数.md\":\"8ff9a8d5\",\"notes_1.javascript_工具函数_16.滚动.md\":\"3343e4be\",\"notes_1.javascript_工具函数_svg.md\":\"8296350c\",\"notes_2.basic_1.html_1.基础.md\":\"dcdaee52\",\"notes_2.basic_2.css_1.基础.md\":\"7ace2c5c\",\"notes_2.basic_2.css_2.flex.md\":\"c69977d3\",\"notes_2.basic_2.css_3.less.md\":\"a501b0d7\",\"notes_2.basic_2.css_4.scss.md\":\"7f9633f1\",\"notes_2.basic_2.css_5.响应式.md\":\"036701f5\",\"notes_2.basic_2.css_6.主题切换.md\":\"0c4e4dd0\",\"notes_2.basic_2.css_7.动画.md\":\"fd4bc61e\",\"notes_2.basic_2.css_8.grid.md\":\"bdc8b7ae\",\"notes_2.basic_5.node_1.起步.md\":\"e7e277ef\",\"notes_2.basic_5.node_4.环境变量设置.md\":\"a03a948a\",\"notes_2.basic_5.node_npm.md\":\"211fbec4\",\"notes_2.basic_5.node_nvm.md\":\"e3486de6\",\"notes_2.basic_5.node_package.json.md\":\"d9e9c604\",\"notes_2.basic_5.node_pnpm.md\":\"bc13810e\",\"notes_2.basic_5.node_yarn.md\":\"56fb8e96\",\"notes_2.basic_5.node_脚本开发.md\":\"b2f2b588\",\"notes_2.basic_6.http_2.http.md\":\"07ef7cc3\",\"notes_2.basic_6.http_untitled.md\":\"0bf853ff\",\"notes_2.basic_7.git_github.md\":\"4a8e9177\",\"notes_2.basic_7.git_vim编辑器.md\":\"7feb6977\",\"notes_2.basic_7.git_分支操作.md\":\"eca5274c\",\"notes_2.basic_7.git_基础.md\":\"13f2197d\",\"notes_2.basic_7.git_子模块.md\":\"4d22ac99\",\"notes_2.basic_7.git_拉取代码.md\":\"1ddaa4e1\",\"notes_2.basic_7.git_提交代码.md\":\"60f0513e\",\"notes_2.basic_7.git_问题整理.md\":\"5ee1ccd8\",\"notes_2.basic_8.java_1.起步.md\":\"cd36d569\",\"notes_2.basic_8.java_3.基础语法.md\":\"b06281a7\",\"notes_2.basic_8.java_4.javaweb.md\":\"ae639163\",\"notes_2.basic_8.java_5.mysql.md\":\"c0605455\",\"notes_2.basic_8.java_6.服务器.md\":\"1fdae0b4\",\"notes_2.basic_9.算法_1.基础.md\":\"fa3f4620\",\"notes_2.basic_9.算法_5.leecode.md\":\"5836668f\",\"notes_3.framework_10.react_1.项目创建与配置.md\":\"a13b8d18\",\"notes_3.framework_10.react_2.语法.md\":\"945be494\",\"notes_3.framework_10.react_3.react-router.md\":\"89475651\",\"notes_3.framework_10.react_4.hooks.md\":\"93d27fd6\",\"notes_3.framework_3.express_1.起步.md\":\"582569a2\",\"notes_3.framework_3.express_2.express方法.md\":\"297b2f45\",\"notes_3.framework_3.express_3.jwt.md\":\"e5f91a6a\",\"notes_3.framework_3.express_4.mysql.md\":\"4f576728\",\"notes_3.framework_3.vue_12.vitepress.md\":\"03a09f4d\",\"notes_3.framework_3.vue_13.vue-router.md\":\"64d860a1\",\"notes_3.framework_3.vue_14.vuetify.md\":\"b8c63df7\",\"notes_3.framework_3.vue_15.源码阅读.md\":\"3b7203db\",\"notes_3.framework_3.vue_16.vite插件开发.md\":\"592c82ee\",\"notes_3.framework_3.vue_18.vueuse.md\":\"7292fe8e\",\"notes_3.framework_3.vue_2.vite.md\":\"66d9c036\",\"notes_3.framework_3.vue_3.基础.md\":\"189184b0\",\"notes_3.framework_3.vue_4.vue2.md\":\"6bd4d84f\",\"notes_3.framework_3.vue_5.vue3.md\":\"da43c351\",\"notes_3.framework_3.vue_6.pinna.md\":\"431f4d88\",\"notes_3.framework_3.vue_7.待整理笔记.md\":\"b5cb4a1d\",\"notes_3.framework_3.vue_8.功能实现.md\":\"deed1460\",\"notes_3.framework_4.uniapp_1.创建项目.md\":\"76affd27\",\"notes_3.framework_4.uniapp_3.实例.md\":\"c5d614e0\",\"notes_3.framework_4.uniapp_4.unicloud.md\":\"2a35fe9c\",\"notes_3.framework_4.uniapp_6.sqlite.md\":\"36191099\",\"notes_3.framework_4.uniapp_hbuilderx插件.md\":\"4bec2ec3\",\"notes_3.framework_4.uniapp_app端文件操作.md\":\"95db967d\",\"notes_3.framework_4.uniapp_nvue.md\":\"625f242d\",\"notes_3.framework_4.uniapp_功能实现.md\":\"0d913121\",\"notes_3.framework_4.uniapp_图片操作.md\":\"1d8b7462\",\"notes_3.framework_4.uniapp_基础知识.md\":\"70124264\",\"notes_3.framework_4.uniapp_小程序.md\":\"0d38f31a\",\"notes_3.framework_4.uniapp_文件操作.md\":\"e86ee38f\",\"notes_3.framework_4.uniapp_滚动.md\":\"97780f32\",\"notes_3.framework_5.electron_1.起步.md\":\"1fa8d3e9\",\"notes_3.framework_5.electron_2.vite-electron.md\":\"30b0f6fe\",\"notes_3.framework_5.electron_2.开始.md\":\"f25811cd\",\"notes_3.framework_5.electron_4.语法.md\":\"cd7644d7\",\"notes_3.framework_5.electron_5.electron打包vue.md\":\"07404ad8\",\"notes_3.framework_5.electron_6.进程通信.md\":\"172975e9\",\"notes_3.framework_5.electron_7.黑夜模式.md\":\"0acdd76f\",\"notes_3.framework_5.electron_8.browserwindow.md\":\"79092934\",\"notes_3.framework_6.微信小程序_1.创建项目.md\":\"43e386d1\",\"notes_3.framework_7.乾坤_1.前置知识.md\":\"87448ab1\",\"notes_3.framework_7.乾坤_2.实战.md\":\"ba1ae36b\",\"notes_3.framework_7.乾坤_3.部署上线.md\":\"3b3e834c\",\"notes_3.framework_7.乾坤_4.源码阅读.md\":\"c21a2e17\",\"notes_3.framework_koa_redis.md\":\"bba89871\",\"notes_3.framework_koa_中间件.md\":\"2ca1c619\",\"notes_3.framework_koa_基础.md\":\"374c2d17\",\"notes_4.library_autoprefixer_1.基础.md\":\"a15e218d\",\"notes_4.library_monaco-editor_monaco-editor.md\":\"57b75b84\",\"notes_4.library_eharts_1.vue中使用.md\":\"cdde4646\",\"notes_4.library_eharts_2.react中使用.md\":\"2579c725\",\"notes_4.library_eharts_3.通用.md\":\"cb7119c9\",\"notes_4.library_eharts_4.饼图.md\":\"4e8e47e2\",\"notes_4.library_eharts_5.柱状图.md\":\"70d08ba6\",\"notes_4.library_eharts_6.折线图.md\":\"ae2e9342\",\"notes_4.library_eharts_7.tooltip.md\":\"114afe2d\",\"notes_4.library_eharts_8.地图.md\":\"8696e214\",\"notes_4.library_logic-flow_1.起步.md\":\"f29527ec\",\"notes_4.library_logic-flow_3.用法.md\":\"d74d70e6\",\"notes_4.library_node包_cheerio.md\":\"c589ee05\",\"notes_4.library_node包_docsify.md\":\"784484ef\",\"notes_4.library_node包_npm-check.md\":\"1ce5454f\",\"notes_4.library_node包_npm-run-all.md\":\"91276b49\",\"notes_4.library_node包_tsup.md\":\"9cf1bf37\",\"notes_4.library_node包_脚本.md\":\"b58b5982\",\"notes_4.library_xlsx_1.文档翻译.md\":\"12943aa2\",\"notes_4.library_xlsx_2.学习xlsx.md\":\"e5e24bbb\",\"notes_4.library_待整理_axios.md\":\"5a7641af\",\"notes_4.library_待整理_dayjs.md\":\"7e7716a5\",\"notes_4.library_待整理_prettier.md\":\"d7bd12d2\",\"notes_4.library_待整理_vxe-table.md\":\"ed1fef55\",\"notes_5.build_1.webpack_1.起步.md\":\"8dd80bd5\",\"notes_5.build_1.webpack_2.loader.md\":\"ec110bce\",\"notes_5.build_1.webpack_3.vue脚手架.md\":\"ffb3d85e\",\"notes_5.build_1.webpack_4.进阶.md\":\"05b3507c\",\"notes_5.build_2.rollup_1.介绍.md\":\"70b92034\",\"notes_5.build_2.rollup_1.起步.md\":\"2c4acac4\",\"notes_5.build_2.rollup_4.打包格式.md\":\"cce455ff\",\"notes_5.build_2.rollup_5.常用插件.md\":\"d9ca29f7\",\"notes_5.build_2.rollup_6.插件开发.md\":\"a8a79b98\",\"notes_5.build_3.babel_3.babel.md\":\"c919cbf8\",\"notes_5.build_4.server_4.上线.md\":\"d50d068a\",\"notes_6.all_3.just-start_2.mongodb.md\":\"a068a2e5\",\"notes_6.all_3.just-start_3.移动端.md\":\"fd479c00\",\"notes_6.all_3.just-start_5.脚本.md\":\"b0c9f691\",\"notes_6.all_4.solve-problems_postmon.md\":\"844774bd\",\"notes_6.all_4.solve-problems_ps.md\":\"bdc89237\",\"notes_6.all_4.solve-problems_typora.md\":\"b10b94a2\",\"notes_6.all_4.solve-problems_uniapp.md\":\"4fd2f730\",\"notes_6.all_4.solve-problems_windows10.md\":\"b2413012\",\"notes_6.all_4.solve-problems_开发.md\":\"104171f2\",\"notes_6.all_4.solve-problems_浏览器.md\":\"af324a8b\",\"notes_6.all_4.solve-problems_论文查重.md\":\"c3cec84e\",\"notes_6.all_4.vscode_1.vscode使用.md\":\"ac6e101a\",\"notes_6.all_4.vscode_1.插件开发流程.md\":\"c7250214\",\"notes_6.all_4.vscode_1.概括.md\":\"1d9fd058\",\"notes_6.all_4.vscode_2.commands.md\":\"17839438\",\"notes_6.all_4.vscode_2.languages.md\":\"ad36adc9\",\"notes_6.all_4.vscode_2.vscode常用插件.md\":\"f856d76a\",\"notes_6.all_4.vscode_2.语法高亮指南.md\":\"022760aa\",\"notes_6.all_4.vscode_4.插件api.md\":\"d2bc7b97\",\"notes_6.all_4.vscode_5.插件开发实例.md\":\"56b1b964\",\"notes_6.all_4.vscode_6.package.json.md\":\"bd15bba9\",\"notes_6.all_english_学习学习.md\":\"8487d588\",\"notes_6.all_snabbdom_1.源码解读.md\":\"86622f05\"}")</script>
    <script type="module" async src="/vite-vue-blog/assets/app.864f9b59.js"></script>
    
  </body>
</html>